<template>
	<view class="container-box">
		<view class="header-box">
			<view class="flex-box">
				<view>
					<u--image :src="mainLogo" width="120rpx" height="120rpx" mode="widthFix"></u--image>
				</view>
				<view class="logo_box_btn">源达财务管理系统</view>
			</view>
			<view class="search-box">
				<u-search bgColor="#fff" @search="handleSearch" placeholder="请输入搜索内容" :showAction="false" v-model="search" :animation="true"></u-search>
				<view class="search-btn" @click="handleSearch">搜索</view>
			</view>
		</view>
		<view class="content-info">
			<view class="card-list">
				<view v-for="(item, index) in cardList" @click="handleClick(item)" :key="index" class="card-item">
					<view class="flex-card">
						<u--image :src="item.icon" width="60rpx" height="60rpx" mode="widthFix"></u--image>
						<!-- <image :src="item.icon" class="image-info"  mode="widthFix"></image> -->
						<view class="card-title">
							{{ item.title }}
						</view>
					</view>
				</view>
			</view>
			<view class="monthly-plan">当月还款计划</view>
			<view class="content-list">
				<z-paging ref="paging" :fixed="false" v-model="list" @query="getList">
					<view class="list-info" v-for="(item, i) in list" :key="i">
						<view class="list-info-item flex-info-box">
							<view>
								分管人员 :
								<text class="list-text">{{ item.nickname }}</text>
							</view>
							<view class="date-box">
								还款日期 :
								<text class="list-text">{{ item.huankuanri }}</text>
							</view>
						</view>
						<view class="list-info-item ml60">
							金额 :
							<text class="list-text">{{ item.huankuanjine }}</text>
						</view>
						<view class="list-info-item ml60">
							公司 :
							<text class="list-text">{{ item.gongsiming }}</text>
						</view>
					</view>
				</z-paging>
			</view>
		</view>
		<u-modal v-for="(item,index) in modalData" :key="index"  :showConfirmButton="false"  :show="item.showModal">
			<view class="model-box">
				
					
				<view slot="title" class="flex-title">
					<view>{{title}}</view>
				</view>
				<view class="flex-model">
					<view class="model-item">
						当前期数：
						<text>{{item.dangqianqishu}}</text>
					</view>
				
					<view class="model-item">
						贷款时间：
						<text>{{item.daikuanshijian}}</text>
					</view>
				</view>
				
				<view class="flex-model">
					<view class="model-item">
						还款金额：
						<text>{{item.huankuanjine}}</text>
					</view>
					<view class="model-item">
						企业名称：
						<text>{{item.gongsiming}}</text>
					</view>
				</view>
				<view class="flex-model">
					<view class="model-item">
						贷款银行：
						<text>{{item.daikuanhang}}</text>
					</view>
					<view class="model-item">
						总期数：
						<text>{{item.zongqishu}}</text>
					</view>
				</view>
			<view class="flex-model">
				<view class="model-item">
					还款日：
					<text>{{item.huankuanri}}</text>
				</view>
				<view class="model-item">
					利率(%)：
					<text>{{item.lilv}}</text>
				</view>
			</view>
			<view class="flex-model">
				<view class="model-item">
					期限(年)：
					<text>{{item.qixian}}</text>
				</view>
				<view class="model-item">
					贷款金额(万)：
					<text>{{item.daikuanjine}}</text>
				</view>
			</view>
				
				<view class="model-btn" @click="handleNoToday(item.id,index)">
					今日不在提醒
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import { loanPlanList } from '@/api/repaymentPlan/repaymentPlan.js';
import {gerRemind,getToday} from '@/api/main/main.js'
export default {
	data() {
		return {
			title: '温馨提示',
			dataList: [],
			mainLogo: 'https://lfn.oss-cn-shanghai.aliyuncs.com/webimage/mainlogo.png',
			cardList: [
				{
					title: '人员',
					icon: 'https://lfn.oss-cn-shanghai.aliyuncs.com/webimage/img1.png',
					path: '/subPackages/personnelPage/personnelPage'
				},
				{
					title: '企业',
					icon: 'https://lfn.oss-cn-shanghai.aliyuncs.com/webimage/img2.png',
					path: '/subPackages/companyInfo/companyInfo'
				},
				{
					title: '贷款',
					icon: 'https://lfn.oss-cn-shanghai.aliyuncs.com/webimage/img3.png',
					path: '/subPackages/loanInfo/loanInfo'
				},
				{
					title: '还款计划',
					icon: 'https://lfn.oss-cn-shanghai.aliyuncs.com/webimage/img4.png',
					path: `/subPackages/repaymentPlan/repaymentPlan?isGroupId=1`
				},
				{
					title: '抵押物',
					icon: 'https://lfn.oss-cn-shanghai.aliyuncs.com/webimage/img5.png',
					path:'/subPackages/collateralPage/collateralPage'
				},
				{
					title: '贷款类型',
					icon: 'https://lfn.oss-cn-shanghai.aliyuncs.com/webimage/img6.png',
					path:'/subPackages/loanType/loanType'
				},
				{
					title: '客户经理',
					icon: 'https://lfn.oss-cn-shanghai.aliyuncs.com/webimage/img7.png',
					path:'/subPackages/customerManager/customerManager'
				}
				// {
				// 	title: '其他',
				// 	icon: 'https://lfn.oss-cn-shanghai.aliyuncs.com/webimage/img8.png'
				// }
			],
			search: '',
			isToken: '',
			list: [],
			content:'423423',
			modalData:[]
		};
	},
	onShow() {
		this.gerRemind()
	},
	methods: {
		handleNoToday(id,index){
			let token = uni.getStorageSync('token');
			let params={
				token,
				id
			}
			getToday(params).then(res=>{
				if(res.code==1){
					this.modalData[index].showModal = false;
				}else{
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 3000
					});
				}
			})
		},
		gerRemind(){
			let token = uni.getStorageSync('token');
			let params={
				token
			}
			gerRemind(params).then(res=>{
				if(res.code==1){
					console.log(res,'-===')
					this.modalData=res.data.map(el=>{
						el.showModal=true
						return el
					})
				}else{
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 3000
					});
				}
			})
		},
		//搜索
		handleSearch(){
			uni.navigateTo({
				url:`/subPackages/searchInfo/searchInfo?search=${this.search}`
			})
		},
		handleClick(item) {
			let path = item.path;
			if (path) {
				uni.navigateTo({
					url: path
				});
			}
		},
		getList(pageNo, pageSize) {
			let token = uni.getStorageSync('token');
			let group_id = uni.getStorageSync('userData').group_id;
			let params = {
				page: pageNo || 1,
				page_size: 50,
				group_id: group_id,
				daikuanid: '',
				token
			};
			loanPlanList(params).then((res) => {
				if (res.code == 1) {
					// 获取当前的月份和年份
					const currentDate = new Date();
					const currentMonth = currentDate.getMonth() + 1 < 10 ? `0${currentDate.getMonth() + 1}` : currentDate.getMonth() + 1; // 月份从0开始，所以需要+1
					const currentYear = currentDate.getFullYear();
					// 过滤数据
					let filteredData = [];
					res.data.list.filter((item) => {
						let arrInfo = item.huankuanri.split('-');
						if (parseInt(arrInfo[0]) == currentYear && parseInt(arrInfo[1]) == currentMonth) {
							filteredData.push(item);
						}
					});
					this.$refs.paging.complete(filteredData);
				} else {
					this.$refs.paging.complete([]);
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 3000
					});
				}
			});
		},
		handlecg() {
			console.log(this.value);
		},
		goLogin() {
			uni.login({
				provider: 'weixin',
				success: (res) => {
					console.log(res);
					// uni.getUserInfo({
					// 	provider: 'weixin',
					// 	success:(infores)=>{
					// 		console.log(infores,'哈哈')
					// 	}
					// })
				}
			});
		},
		queryList(pageNo, pageSize) {
			let dataList = [
				{
					title: '测试'
				},
				{
					title: '测试'
				},
				{
					title: '测试'
				},
				{
					title: '测试'
				},
				{
					title: '测试'
				},
				{
					title: '测试'
				}
			];
			this.$refs.paging.complete(dataList);
			// this.$refs.paging.complete([]);
		}
	}
};
</script>

<style scoped lang="scss">
.container-box {
	min-height: 100vh;
	background: #f6f9ff;
}
.ml60{
	margin-left:60rpx;
}
.content-box {
	margin: 20rpx 0;
}
.close-box{
	// width:20rpx !important;
	// text-align:right;
	// display: flex;
	// justify-content:end;
	
}

/deep/ .u-line{
	display:none;
}
.flex-title{
	display: flex;
	justify-content:center;
	padding:15rpx 0;
	align-items:center;
}
.contet-flex {
	display: flex;
	justify-content: space-between;
	margin: 20rpx 0;
}
.flex-model{
	display: flex;
	justify-content:space-between;
}
.model-btn{
	width:550rpx;
	height:80rpx;
	line-height:80rpx;
	background:#409eff;
	text-align:center;
	border-radius:40rpx;
	font-size:28rpx;
	color:#fff;
	margin:30rpx auto;
}
.image-info {
	width: 60rpx;
	height: 60rpx !important;
}

.contet-flex-info {
	width: 50%;
	height: 200rpx;
	background-color: red;
}
.model-item{
	font-size:30rpx;
	padding:10rpx 0;
}
.mr10 {
	margin-right: 10rpx;
}
.header-box {
	padding: 100rpx 30rpx 50rpx;
	background-color: rgba(64, 158, 255, 0.5);
	border-radius: 0 0 30rpx 30rpx;
	box-sizing: border-box;
	width: 100%;
}
.flex-box {
	display: flex;
	display: flex;
	justify-content: center;
	align-items: center;
}
.logo_box_btn {
	background-color: #e33728;
	border-radius: 10rpx;
	display: flex;
	margin-left: 30rpx;
	justify-content: center;
	align-items: center;
	width: 280rpx;
	height: 72rpx;
	color: #fff;
	font-size: 28rpx;
}
.content-info {
	padding: 20rpx 30rpx;
}
.search-box {
	margin-top: 40rpx;
	display: flex;
	align-items: center;
}
.search-btn {
	color: #fff;
	background-color: #409eff;
	width: 100rpx;
	height: 60rpx;
	line-height: 60rpx;
	text-align: center;
	font-size: 26rpx;
	margin-left: 20rpx;
	border-radius: 30rpx;
}
.card-list {
	box-shadow: 0 2rpx 12rpx 0 rgba(0, 0, 0, 0.1);
	border-radius: 20rpx;
	padding: 20rpx;
	display: flex;
	flex-wrap: wrap;
	// justify-content: space-between;
	background: #fff;
}
.card-item {
	width: 25%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 10rpx 0;
	font-size: 28rpx;
}
.flex-card {
	display: flex;
	align-items: center;
	flex-direction: column;
}
.card-title {
	margin-top: 15rpx;
	color: #333;
}

.monthly-plan {
	padding: 20rpx 0;
	font-size: 30rpx;
	color: #333;
	display: flex;
	align-items: center;
	position: relative;
	margin-left: 30rpx;
}
.monthly-plan::before {
	content: '';
	display: block;
	width: 10rpx;
	height: 40rpx;
	background: #409eff;
	position: absolute;
	border-radius: 20rpx;
	position: absolute;
	left: -10px;
	top: 22%;
}
.content-list {
	height: 40vh;
}
.list-info {
	box-shadow: 0 2rpx 12rpx 0 rgba(0, 0, 0, 0.1);
	border-radius: 15rpx;
	padding: 20rpx;
	display: flex;
	background: #fff;
	margin-bottom: 20rpx;
	font-size: 30rpx;
	color: #333;
	flex-direction: column;
}
.list-text {
	margin-left: 20rpx;
	color: #303133;
	font-size: 30rpx;
}
.list-info-item {
	margin-bottom: 5rpx;
}
.flex-info-box {
	display: flex;
	justify-content: space-between;
}
/deep/ .u-modal__content {
       display: flex;
       flex-direction: row;
	   padding: 12px;
       justify-content: end !important;
}
</style>
